<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '商品管理'}, {name: '商品列表'}]"></v-breadcrumb>

        <div class="search-box">
            <div class="left">
                <div class="item">
                    <span class="span">分类</span>
                    <el-select v-model="obj.category_id" class="width-200" placeholder="请选择" @change="getData()">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="(item,index) in categorys" :key="index" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="span">名称</span>
                    <el-input v-model="obj.name" placeholder="请填写商品名称" class="width-200"
                              @blur="getData()"></el-input>
                </div>
            </div>
            <div class="right">
                <el-button-group>
                    <el-button v-preventDbClick @click="getData()" type="primary" icon="el-icon-search">查询</el-button>
                    <el-button v-preventDbClick @click="reset()" type="primary" icon="el-icon-refresh">重置</el-button>
                </el-button-group>
            </div>
        </div>
        <div class="g-box mt-15" style="min-height:600px;">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100"
                           @click="gotoPage('/goods/detail')">新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column label="图片" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover"
                            :preview-src-list="[scope.row.image]"
                            :src="scope.row.image">
                            <div slot="error" style="width100%;height:100%;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column label="分类" width="200" prop="category_name"></el-table-column>
                <el-table-column prop="price" label="基础售价" width="150"></el-table-column>
                <el-table-column prop="stock" label="库存" width="100"></el-table-column>
                <el-table-column prop="sales" label="销量" width="100"></el-table-column>
                <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                <el-table-column label="商品类型" width="110">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.type==1" type="success">无限制
                        </el-button>
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.type==2" type="danger">普通商品
                        </el-button>
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.type==3" type="warning">活动商品
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="90">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.status==1" type="success">正常
                        </el-button>
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.status==2" type="danger">下架
                        </el-button>
                        <el-button v-preventDbClick plain size="mini" v-if="scope.row.status==99" type="warning">
                            已删除
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="140" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑"
                                   @click="gotoPage('/goods/detail?id='+scope.row.id)"
                                   type="primary" icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="商品规格"
                                   @click="gotoPage('/goods/specification?id='+scope.row.id)"
                                   type="success" icon="el-icon-s-operation" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除"
                                   @click="del(scope.row.id)" type="warning" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="clearfix"></div>
            <div class="mb-10 mt-20 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[10,20,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            obj: {category_id: 0, name: '', page: 1, size: 10},
            total: 0,
            list: [],
            categorys: [],
        };
    },

    computed: {},

    created() {
        this.getCategory();
        this.getData();
    },

    methods: {
        getCategory() {
            request({
                url: '/manage/goodsCategory/all',
                data: {status: 1}
            }).then((res) => {
                this.categorys = res.data;
            })
        },
        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/goods/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        getData(page) {
            this.obj.page = !!page ? this.obj.page : 1;
            request({
                url: '/manage/goods/list',
                data: this.obj
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
            })
        },

        reset() {
            this.obj.page = 1;
            this.obj.size = 10;
            this.obj.category_id = 0;
            this.obj.name = '';
            this.getData();
        },

        changeCurrent(val) {
            this.obj.page = val;
            this.getData(true);
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
